<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<input type="text" name="">
	<button>查询</button>
	<script type="text/javascript">
		/*
			AJAX: 是一种无需链接整个网页的情况下 能够更新部分网页的技术
			也就是js通过网址(url)去加载数据，整个过程用户不可见(无感刷新)
		*/
		let btn = document.querySelector("button")
		let inp = document.querySelector("input")
		btn.onclick = function() {
			// 1.创建ajax对象
			//XMLHttpRequest 用于和服务器之间交换数据的，所以现代浏览器都支持
			let xhr = new XMLHttpRequest()
			console.log(xhr.readyState)

			// 2.和服务器建立链接
			// xhr.open(method,Url,async可省略)
			/*
				method: get,post,put,delete
					get:获取服务信息（查询）
					post:发送信息
					put: 跟新信息
					delete： 删除信息
			*/
			// key = value
			xhr.open("get",`https://geoapi.qweather.com/v2/city/lookup?location=${inp.value}&key=c494e264764449f7b4f6bf742276d7f9`)
			//3.发送数据
			//get： 直接在url后面拼接   ?name=张三&age=18&sex=男
			// post put : 需要加一个请求头，并且请求头的值不同，发送的数据格式也不同，不能拼接到url上,放到xhr.send
			/*
				xhr.setRequestHeader("content-Type", value)
				"Content-Type": 固定值 传输的数据类型
				value: 1.application/x-www-form-urlencoded
					数据类型: xhr.send('name=张三&age=18&sex=男')

					2.application/json;
					数据格式:obj = {
						name:"zhangsan"
						sge: 18,
						sex:"男"
					}
					xhr.send(JSON.stringify(obj))

					3.multipart/form-data 上传文件

			*/
			xhr.send()
			// 4.接收数据
			// readyState改变的时候，会触发onreadystatechange事件
			// readyState存了每个阶段的状态变化 0-4
			// 0 请求初始化 表示刚创建了ajax
			// 1 服务器一连接 open
			// 2 请求以接收 xhr.send
			// 3 请求处理中
			// 4 请求已完成，响应就绪 
			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4){
					// 拿到返回的数据
					let res = JSON.parse(xhr.responseText)
					console.log(res)
							for(let i = 0; i < location.length; i++){
						console.log(location[i])
						let li = `<li>名字${location[i].name} ---- 国家 ${location[i].country}</li>`
						ul.innerHTML += li
					}
				}

			}
		}

		/*
			状态码：
			1**信息，服务器接收到请求
			2**成功，请求成功接收并处理
			3**重定向
			4**客户端错误  语法错误或者无法完成请求
			5**服务器错误


			200 成功

			400 语法错误
			401 未授权 没登陆
			403 没权限
			404 请求资源不存在（url写错）
			405 请求方法被禁用
			500 服务器内部错误
			501 服务器不支持请求功能
			502 网关错误
			503 服务器不可用
			504 网关超时
		*/
	</script>
</body>
</html>